import React, {createRef} from "react"
import './index.scss'
import ContentView from "../../components/ContentView"
import ScrollContent from "../../components/ScrollContent"
import ToggleBtnGroup from "../../components/ToggleBtnGroup"
import HistoryBack from '../../components/HistoryBack'
import ListItem from '../../components/ListItem'
import {homeSearchGetting} from "../../http/api"
const {BuyItem,SupplyItem,ListEmpty} = ListItem
export default class Search extends React.Component{
        constructor (props) {
                super (props);
                this.state={
                        defaultBtnValue:0,
                        keywords:'',
                        dataSource:[],
                        loadingStatus:false
                }
                this.keywordsRef = createRef()
                this.scrollRef = createRef()
                this.dataSource = []
                this.offset = 0
        }
        //toggle按钮切换搜索
        handleToggleSearch=defaultBtnValue=>{
                this.setState({defaultBtnValue})
                this.dataSource = []
                this.offset = 0
                this.setState({loadingStatus:false,},()=>{
                        this.getDataSource()
                })

        }
        //键盘回车搜索
        searchKeyPress =e=>{
                let keyCode = e.which||e.keyCode
                if (keyCode !== 13) {
                        return
                }
                this.offset = 0
                this.setState({loadingStatus:false,provideCount:0,requireCount:0},()=>{
                        this.dataSource = []
                        this.getDataSource()
                })
        }
        keywordsClear =()=>{
                this.setState({loadingStatus:false,provideCount:0,requireCount:0,keywords:''})
                this.dataSource = []
                this.offset = 0
                this.keywordsRef.current.value=''
        }
        //数据源获取
        getDataSource=()=>{
                const {defaultBtnValue,loadingStatus,keywords} = this.state
                const [searchKey,type] = [keywords,defaultBtnValue+1]
                if (loadingStatus||!keywords) {
                        return
                }
                homeSearchGetting({searchKey,type,rows:10,offset:this.offset}).then(res=>{
                        const {provideCount,requireCount,list} = res
                        this.dataSource = [...this.dataSource,...list]
                        let loadingStatus = ((this.dataSource.length === provideCount && type === 1) || (this.dataSource.length === requireCount && type === 2));
                        this.setState({loadingStatus,provideCount,requireCount},()=>{
                                if (this.scrollRef.current) {
                                        this.scrollRef.current.finishUpload()
                                }
                        })
                })
        }
        //上拉加载
        handleOnPullUp=()=>{
                this.offset = this .offset +10
                this.getDataSource()
        }
        render () {
                const {keywords,loadingStatus,provideCount,requireCount,defaultBtnValue} = this.state
                const listItemRender = [
                        this.dataSource.map((item,key)=><SupplyItem dataSource={item} key={key}/>),
                        this.dataSource.map((item,key)=><BuyItem dataSource={item} key={key}/>),
                ][defaultBtnValue]
                return <ContentView className='search'>
                        <div className="header" slot='header'>
                                <div className="back-wrapper"><HistoryBack/></div>
                                <div className="input-wrapper">
                                        <input type="search"
                                               onKeyPress={this.searchKeyPress}
                                               onChange={()=>{this.setState({keywords:this.keywordsRef.current.value})}}
                                               placeholder='请输入商品名称'
                                               ref={this.keywordsRef}/>
                                        {
                                                !!keywords&&<div className="clear" onClick={this.keywordsClear}/>
                                        }
                                </div>
                        </div>
                        <div className="content-main" slot='content'>
                                <div className="header-tips">
                                        查询结果：供应{provideCount||0}条，求购{requireCount||0}条
                                </div>
                                <div className="list-main">
                                        <ScrollContent
                                                ref={this.scrollRef}
                                                loading={true}
                                                loadingStatus={loadingStatus}
                                                onUpload={this.handleOnPullUp}>
                                                <div className="toggle-wrapper">
                                                        <ToggleBtnGroup defaultBtnValue={0} onClick={this.handleToggleSearch}/>
                                                </div>
                                                <div className="list-items-wrapper">
                                                        {
                                                                !!listItemRender.length?listItemRender:<ListEmpty/>
                                                        }
                                                </div>
                                        </ScrollContent>
                                </div>
                        </div>
                </ContentView>
        }
}
